<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>管理收货地址</title>
    <link rel="stylesheet" href="/templates/index/vendors/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">

</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <a href="javascript:history.back(-1);" class="icon icon-left pull-left"></a>
            <h1 class="title">管理收货地址</h1>
        </header>
        {if($address_list)}
        <div class="content native-scroll" id="edit_content">
            <div class="list-block media-list">
                <ul>
                    {foreach $address_list as $address_info}
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title-row">
                                <div class="item-title">收货人：{$address_info.true_name}</div>
                                <div class="item-after">{$address_info.mob_phone}</div>
                            </div>
                            <div class="item-subtitle">收货地址：{$address_info.city_name}{$address_info.area_name}{$address_info.area_info}{$address_info.address}</div>
                        </div>
                        {if($address_info.is_default == '1')}
                        <div class="content-padded docs-icons"><span class="icon icon-check"></span></div>
                        {/if}
                    </li>
                    {/foreach}
                </ul>
            </div>
        </div>
        {/if}
        <div class="content" id="add_content">
            <div class="list-block">
                <ul>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-input">
                                    <input type="text" placeholder="" id='city-picker'/>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-input">
                                    <input type="text" placeholder="请输入详细地址" id="address">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-input">
                                    <input type="text" placeholder="请输入收货人姓名" id="true_name">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-input">
                                    <input type="text" placeholder="请输入收货人联系电话" id="mob_phone">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-toggle"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">默认收货地址</div>
                                <div class="item-input">
                                    <label class="label-switch">
                                        <input type="checkbox" id="is_default">
                                        <div class="checkbox"></div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bar bar-footer">
            <a class="button button-fill button-danger" id="addAddress">新增收货地址</a>
            <a class="button button-fill button-danger" id="saveAddress">保存地址</a>
        </div>
    </div>
</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
<script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
<script type="text/javascript">
    $.init();
    $(document).ready(function(){
        $("#city-picker").cityPicker({
            value: ['上海', '黄浦区']
        });
        $('#add_content').hide();
        $('#saveAddress').hide();
        $('#addAddress').click(function(){
            $('#add_content').show();
            $('#saveAddress').show();
            $('#edit_content').hide();
            $('#addAddress').hide();
        });
        $('#saveAddress').click(function(){
            var true_name = $('#true_name').val();
            var area_city = $('#city-picker').val().split(' ');
            var city_name = area_city[0]==undefined?'':area_city[0];
            var area_name = area_city[1]==undefined?'':area_city[1];
            var area_info = area_city[2]==undefined?'':area_city[2];
            var address = $('#address').val();
            var mob_phone = $('#mob_phone').val();
            var is_default = $('#is_default').attr("checked")?'1':'0';
            var data ={
                true_name:true_name,
                city_name:city_name,
                area_name:area_name,
                area_info:area_info,
                address:address,
                mob_phone:mob_phone,
                is_default:is_default
            };
            $.post('/index/member_address/save',data,function(result){
                if(result.code = 1){
                    location.href=result.url;
                }else{
                    $.alert(result.msg);
                }
            },'json');
        });
    });
</script>
</body>
</html>